<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var app6 = new Vue({
                el: '#table-6',
                methods:{

                    addpeople:function(){
                        var x = { name:this.username, age:this.age ,time:new Date() };
                        this.peoples.push(x);
                    },
                    removeall:function(){
                        this.peoples=[];

                    },remove :function(index){
                        this.peoples.splice(index,1);

                    }


                },

                data: {
                    username:'',
                    age:'',
                    peoples: [
                        { name: 'xujiahui',age:'25',time:new Date() },
                        { name: 'xue',age:'18',time:new Date() },
                        { name: 'llinm',age:'27',time:new Date() }
                    ]

                }
                ,filters:{
                    hhmmss:function(val){
                        return (val.getHours()+":"+val.getMinutes()+":"+val.getSeconds());
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="table-6">
    <input v-model="username">
    <input v-model="age">
    <button v-on:click=" addpeople">添加</button>
    <button v-on:click="removeall">删除所有</button>
  <table border="1" >
      <tr>
          <th>序号</th>
         <th>名字</th>
          <th>年龄</th>
          <th>时间</th>
          <th>操作</th>
      </tr>
        <tr v-for="(people,index) in peoples">
            <td>{{ index+1}}</td>
            <td>{{ people.name }}</td>
            <td>{{people.age}}</td>
            <td>{{people.time|hhmmss}}</td>
            <td><button v-on:click="remove(index)">删除</button></td>
        </tr>

  </table>
</div>
</body>
</html>